<template>
  <TreeSelectComponent
    v-bind="$props"
    :url="departmentTreeUrl"
    v-model="treeId"
    :empty-values="[0, '', undefined, null]"
  />
</template>
<script lang="ts" setup>
/*
 *部门下拉树形菜单
 */
// import TreeSelect from '@/components/TreeSelect.vue';
import urls from '@/api/request/urls';
import type { TreeData, TreeProps } from '@/types/interface/base_interface';
import { ref } from 'vue';
// 获取父组件传递过来的值，主要用于部门模块
// const table = inject<TableData>('table'); // 表格信息
// 获取父组件传递过来的值
interface Props {
  isRemote?: Boolean; //是否从服务器获取，如果从服务器获取就不再从data获取
  data?: TreeData[]; //传入的数据。和isRemote一般是二选一
  disabled?: boolean; // 可用性
  showCheckbox?: boolean; // 是否显示复选框
  selectWidth?: string; //下拉框宽度
  emptyValues?: Array<any>; //下拉框默认为空的值，如果有其他值需要自己单独传入
  defaultProps?: TreeProps; //自定义树形内容。如果与默认值不同，需要传入自己实际的树形内容对应属性
}
const props = withDefaults(defineProps<Props>(), {
  isRemote: () => Boolean(true) //服务器地址，只要传递了url就不再从data获取
});

const treeId = defineModel<Number>({
  required: false,
  default: 0
});

const departmentTreeUrl = ref<String>('');
//如果要从远程获取数据
if (props.isRemote) {
  departmentTreeUrl.value = urls.API_URL_BACKSTAGE_DEPARTMENT_TREE;
}
</script>
<style lang="scss" scoped>
// .el-form-item__content span {
//   display: block;
//   width: 100%;
// }
// .el-select {
//   // 重写element plus选择框的宽度，因此此处选择框的宽度无法正常显示.
//   //原因如下：在版本 2.5.0之后， el-select 的默认宽度更改为 100% 当使用内联形式时，宽度将显示异常。 为了保持显示正常, 您需要手动配置 el-select 的宽度 (如: 例子).
//   width: 240px;
// }
</style>
